<template>
    <el-button size="small" @click="handleEdit">编辑课程</el-button>

    <!--编辑弹出框-->
    <el-dialog v-model="editDialogVisible"
               @close="closeReset"
               append-to-body="true">
        <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                :label-position="labelPosition"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
        >
            <el-form-item label="课程名" prop="name">
                <el-input v-model="ruleForm.name"/>
            </el-form-item>
            <el-form-item label="课程介绍" prop="intro">
                <el-input v-model="ruleForm.intro"
                          type="textarea"/>
            </el-form-item>

            <el-form-item label="课程类别" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio border label="理学"/>
                    <el-radio border label="工学"/>
                    <el-radio border label="文学"/>
                    <el-radio border label="法学"/>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="课程标签">
                <el-tag
                        v-for="tag in dynamicTags"
                        :key="tag"
                        class="mx-1"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)"
                >
                    {{ tag }}
                </el-tag>
                <el-input
                        v-if="inputVisible"
                        ref="InputRef"
                        v-model="inputValue"
                        class="ml-1 w-20"
                        size="small"
                        @keyup.enter="handleInputConfirm"
                        @blur="handleInputConfirm"
                />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                    + 新增标签
                </el-button>
            </el-form-item>

            <!--switch标签-->
            <el-form-item label="精品设置">
                <el-radio-group v-model="ruleForm.vip">
                    <el-radio border label="ORDINARY"/>
                    <el-radio border label="VIP"/>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="uploadCourse">
                    更新
                </el-button>

                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
    import {editCourse, updateCourse} from "@/api/course";
    import {nextTick, reactive, ref} from "vue";
    import {ElMessage, ElMessageBox} from "element-plus";
    import {selectTextById, updateText} from "@/api/textualmaterial";
    const editDialogVisible = ref(false);
    const props = defineProps(['scope','videoControl','textControl','videoExamining','textExamining'])

    const videoControl = props.videoControl;
    const textControl = props.textControl;
    const videoExamining  = props.videoExamining;
    const textExamining = props.textExamining;
    // console.log(textExamining)
    let nameTemp = '';
    let typeTemp = '';
    let labelTemp = '';
    let vipTemp ='';
    let introTemp = '';
    //编辑函数，点开隐藏框
    const handleEdit = () => {
        if (videoControl || videoExamining){
            editCourse(props.scope).then((res) => {
                nameTemp = res.data.name;
                typeTemp = res.data.type;
                labelTemp = res.data.label;
                vipTemp = res.data.vip;
                introTemp = res.data.intro;
                ruleForm.id = res.data.id;
                ruleForm.name = res.data.name;
                ruleForm.type = res.data.type;
                ruleForm.vip = res.data.vip;
                ruleForm.intro = res.data.intro;
                dynamicTags.value = res.data.label.split('&')
                // console.log(ruleForm)
            })
        }else if (textExamining || textControl){
            selectTextById({id:props.scope}).then((res)=>{
                nameTemp = res.data.name;
                typeTemp = res.data.type;
                labelTemp = res.data.label;
                vipTemp = res.data.vip;
                introTemp = res.data.intro;
                ruleForm.id = res.data.id;
                ruleForm.name = res.data.name;
                ruleForm.type = res.data.type;
                ruleForm.vip = res.data.vip;
                ruleForm.intro = res.data.intro;
                dynamicTags.value = res.data.label.split('&')
            })
        }


        editDialogVisible.value = true;
    }

    //编辑操作
    //隐藏框内参数
    const inputValue = ref()
    const dynamicTags = ref([])
    const inputVisible = ref(false)
    const InputRef = ref()
    //表单验证和表单数据处理
    const formSize = ref('large')
    const labelPosition = ref('top')
    const ruleFormRef = ref()

    //表单包含的信息
    const ruleForm = reactive({
        id: 0,
        name: '',
        type: '',
        label: '',
        vip:'',
        intro:'',
    })
    //表单验证
    const rules = reactive({
        name: [
            {required: true, message: '请填写课程名', trigger: 'blur'},
        ],
        type: [
            {
                required: true,
                message: '至少选择一个分类',
                trigger: 'change',
            },
        ],
        intro:[
            {required: true, message: '请填写课程名', trigger: 'blur'},
            { min: 5, max: 20, message: '介绍长度在5-20个字符之间', trigger: 'blur' },
        ]
    })

    //重置表单
    const resetForm = () => {
        //表单其它内容重置
        ruleForm.name = nameTemp;
        //tag标签重置
        dynamicTags.value = labelTemp.split('&')
        //单选框重置
        ruleForm.type = typeTemp;
        ruleForm.vip = vipTemp;
        ruleForm.intro = introTemp;
    }
    //关闭表单重置
    const closeReset = () => {
        resetForm();
    }
    const uploadCourse = () => {
        ruleFormRef.value.validate((valid) => {
            ruleForm.label = dynamicTags.value.join('&')
            if (valid) {

                ElMessageBox.confirm(
                    '是否要更新课程信息',
                    '警告',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        if (videoControl || videoControl){
                            updateCourse(ruleForm).then((res) => {
                                location.reload();
                                editDialogVisible.value = false;
                            })
                        }else if (textControl || textExamining){
                            updateText(ruleForm).then((res)=>{
                                location.reload();
                                editDialogVisible.value = false;
                            })
                        }

                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消保存',
                        })
                    })
            }
        })


    }


    //tag标签处理
    const handleClose = (tag) => {
        dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
    }

    const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
            InputRef.value.input.focus()
        })
    }

    const handleInputConfirm = () => {
        if (inputValue.value.trim()) {
            dynamicTags.value.push(inputValue.value)
        }
        inputVisible.value = false
        inputValue.value = ''
    }

    //switch处理
</script>

<style scoped>

</style>